<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>知行合壹登录界面</title>
    <!--导入外部css-->
    <link href="css/index.css" rel="stylesheet">
</head>

<body>
    <!--面板-->
    <div id="panel">
        <!--面板的头部-->
        <div class="panel-header">
            <h2>zxyi教育系统</h2>
        </div>
        <!--面板的中间内容-->
        <div class="panel-content">
            <!--账号输入框-->
            <div class="user-pwd">
                <img src="images/icon_people.png">
                <input placeholder="请输入用户名/手机号" name="user">
            </div>
            <!--密码输入框-->
            <div class="user-pwd">
                <img src="images/icon_password.png">
                <input placeholder="请输入密码" type="password" name="pwd">
            </div>
            <!--默认的设置-->
            <div class="setting">
                <a href="#"><input type="checkbox"> 下次自动登录</a>
                <a href="#" class="pull-right">忘记密码?</a>
            </div>
            <!--登录按钮-->
            <button class="login-btn">登&nbsp;录</button>
            <!--立即注册-->
            <div class="reg">
                还没账号?&nbsp;&nbsp;<a href="#">立即注册</a>
            </div>
        </div>
        <!--面板的尾部-->
        <div class="panel-footer">
            <span>社交账号登录: </span>
            <img src="images/sina.png">
            <img src="images/weixin.png">
            <img src="images/qq.png">
        </div>
    </div>

    <script src="../jquery.min.3.4.1.js"></script>
    <script>
        console.log($('.panel-header').offset().left);
        
        $('.panel-header').on('mousedown', function (e) {
            // console.log(1);
            var y = e.pageY - $(this).offset().top;
            // console.log(y);
            
            $(this).on('mousemove', function (e) {
                console.log($(this).offset().left);
                $(this).parent().css({ left: e.pageX , top: e.pageY - y + 200});
                if($(this).offset().left <= 0){
                    $(this).parent().css({left:200});
                }
                if($(this).offset().top <= 0){
                    $(this).parent().css({top:200});
                }
            })
        })
        $('.panel-header').on('mouseup',function(){
            $(this).off('mousemove')
        })
    </script>
</body>

</html>